<template>
  <div id="assign">
    <el-button size="mini" type="text" @click="to">{{ data.order.status==100 ? '派单' : '工单' }}</el-button>
    <el-dialog :append-to-body="true" :visible.sync="dialog" :title="data.order.status==100 ? '派单' : '工单'" width="940px">
      <el-form ref="form" :model="value" :inline="true" :rules="rules" size="small" label-width="125px">
        <el-row :gutter="20">
          <!-- <el-col :span="12">
            <el-form-item label="服务等级" prop="serviceLevel">
              <el-select v-model="value.serviceLevel" clearable class="input_text" :disabled="isView">
                <el-option v-for="item in serviceLevelOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="故障类型">
              <el-select v-model="value.faultType" clearable class="input_text" :disabled="isView">
                <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程师类别" prop="major">
              <el-select v-model="value.major" class="input_text" :disabled="isView">
                <el-option
                  v-for="item in majors"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工程师等级" prop="level">
              <el-select v-model="value.level" class="input_text" :disabled="isView">
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="筛选方式" prop="filterOption">
              <el-select v-model="value.filterOption" class="input_text" :disabled="isView" @change="handleFilterSelect">
                <el-option
                  v-for="item in filterOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务商" prop="supplier">
              <el-select v-model="value.supplier" clearable class="input_text" :disabled="isView" @change="handleSelect">
                <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定合同">
              <!-- <el-input v-model="value.contractId" style="width: 200px;"/>-->
              <el-select v-model="value.contractId" clearable class="input_text" :disabled="isView">
                <el-option v-for="item in contractOptions" :key="item.name + item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预约上门时间" prop="addriveTime">
              <el-date-picker
                v-model="value.addriveTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                style="width: 300px;"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估服务时长" prop="serviceTime">
              <el-input-number v-model.number="value.serviceTime" :min="0" :max="999" controls-position="right" style="width: 300px;" :disabled="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所需工具">
              <el-input v-model="value.requireTool" style="width: 300px;" :rows="4" type="textarea" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="value.notes" style="width: 760px;" :rows="4" type="textarea" :readonly="isView" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="data.order.status !== 100" :gutter="20">
          <el-col :span="12">
            <el-form-item label="派单人" prop="assignOperator">
              <el-input v-model="value.assignOperator" style="width: 300px;" :disabled="isView" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="派单时间" prop="assignTime">
              <el-date-picker
                v-model="value.assignTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width: 300px;"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right">
        <el-button v-show="data.order.status!== 100" :loading="loading" type="primary" @click="cancel">返回</el-button>
        <el-button v-show="data.order.status===100" type="text" @click="cancel">取消</el-button>
        <el-button v-show="data.order.status===100" :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import { get } from '@/api/dictDetail'
import { EngineerMajors, EngineerLevels, filterOptions } from '@/constants/consts'
import { queryidandname } from '@/api/tServiceproviderInfo'

export default {
  name: 'OrderInfo',
  props: {
    data: {
      type: Object,
      required: true
    },
    supThis: {
      type: Object,
      required: true
    },
    isView: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      // serviceLevelOptions: [],
      faultTypeOptions: [],
      supplierOptions: [],
      contractOptions: [],
      majors: EngineerMajors,
      levels: EngineerLevels,
      filterOptions,
      repairAddress: this.data.order.address,
      value: {
        id: this.data.order.id,
        // serviceLevel: this.data.order.serviceLevel,
        contractId: this.data.order.contractId,
        faultType: this.data.order.faultType,
        supplier: this.data.order.supplier,
        addriveTime: this.data.order.addriveTime === null ? this.data.order.requireTime : this.data.order.addriveTime,
        serviceTime: this.data.order.serviceTime,
        requireTool: this.data.order.requireTool,
        notes: this.data.order.notes,
        assignOperator: this.data.order.assignOperator,
        assignTime: this.data.order.assignTime,
        acceptOperator: this.data.order.acceptOperator,
        status: this.data.order.status,
        acceptTime: this.data.order.acceptTime,
        level: this.data.order.level,
        major: this.data.order.major,
        filterOption: this.data.order.filterOption
      },
      rules: {
        // serviceLevel: [
        //   { required: true, message: '请选择服务等级', trigger: 'blur' }
        // ],
        filterOption: [
          { required: true, message: '请选择筛选方式', trigger: 'blur' }
        ],
        major: [
          { required: true, message: '请选择工程师类型', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择工程师等级', trigger: 'blur' }
        ],
        supplier: [
          { required: true, message: '请选择服务商', trigger: 'blur' }
        ],
        addriveTime: [
          { required: true, message: '请选择上门时间', trigger: 'blur' }
        ],
        serviceTime: [
          { required: true, message: '请选择服务时长', trigger: 'blur' }
        ],
        assignOperator: [
          { required: true, message: '请选择派单人', trigger: 'blur' }
        ],
        assignTime: [
          { required: true, message: '请选择派单时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 加载数据字典
    this.getDict('fault_type')
    // this.getDict('service_level')
  },
  methods: {
    async getDict(name) {
      return new Promise((resolve, reject) => {
        get(name).then(res => {
          if (name === 'fault_type') {
            const content = [].concat(res.content)
            const _this = this
            content.forEach(function(data, index) {
              const faultTypeOption = { id: data.id, name: data.label }
              _this.faultTypeOptions.push(faultTypeOption)
            })
          } else {
            // const content = [].concat(res.content)
            // const _this = this
            // content.forEach(function(data, index) {
            //   const serviceLevelOption = { id: data.id, name: data.label }
            //   _this.serviceLevelOptions.push(serviceLevelOption)
            // })
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    to() {
      this.value.id = this.data.order.id
      this.handleSelect(this.data.order.supplier)
      this.handleFilterSelect()
      this.dialog = true
      this.value = this.data.order
    },
    handleFilterSelect(value) {
      // this.value.supplier = ''
      const params = {
        country: this.data.country,
        province: this.data.province,
        city: this.data.city,
        major: this.value.major,
        level: this.value.level
      }
      if (this.value.filterOption === '区') {
        params.county = this.data.county
      }
      queryidandname(params).then(res => {
        this.supplierOptions = res.map(item => ({
          id: item.id,
          name: item.seproName
        }))
      })
    },
    handleSelect(id) {
      if (id) {
        this.getSupplierContract(id)
      }
    },
    getSupplierContract(id) {
      request({
        url: 'api/tServiceproviderContract?page=0&size=1000&sort=creatTime,desc&serviceproviderId=' + id,
        method: 'get'
      }).then(res => {
        const content = [].concat(res.content)
        const _this = this
        _this.contractOptions = []
        content.forEach(function(data, index) {
          const contractOptions = { id: data.id, name: data.contractName }
          _this.contractOptions.push(contractOptions)
        })
        console.log(_this.contractOptions)
      }).catch(err => {
        console.log(err)
      })
    },
    cancel() {
      this.resetForm()
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.value.status = 200
          const _this = this
          request({
            url: 'api/tWorkOrder/assign',
            method: 'post',
            data: _this.value
          }).then(res => {
            this.resetForm()
            this.$notify({
              title: '派单成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.supThis.init()
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.value = {
        id: '',
        // serviceLevel: '',
        contractId: '',
        faultType: '',
        supplier: '',
        addriveTime: '',
        serviceTime: '',
        requireTool: '',
        notes: '',
        assignOperator: '',
        assignTime: '',
        acceptOperator: '',
        acceptTime: '',
        major: '',
        level: '',
        filterOption: ''
      }
    }
  }
}
</script>

<style scoped>
#assign{
  display: inline-block;
  margin-right: 3px;
}
.input_text {
  width: 300px;
}
</style>
